<%@ include file="/WEB-INF/templates/includes/taglibs.jsp"%>

<div id="experience-group" class="control-group">
    <label class="control-label" for="experience">Experience</label>
    <c:choose>
        <c:when test="${empty cvForm.experiences}">
            <div class="controls span8">
                <div class="span8">
                    <div class="span3"><label>Employer </label><input type="text" class="employer" id="employer_0" name="experiences[0].employer" placeholder="Employer"></div>
                    <div class="span2"><label>Start Date </label>
                        <div class="input-append date exp-datepicker startDate" id="startDate_0" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                            <input class="span2" size="16" type="text" value="12-02-2012" name="experiences[0].fromDate" readonly>
                            <span class="add-on"><i class="icon-th"></i></span>
                        </div>
                    </div>
                    <div class="span2"><label>End Date </label>
                        <div class="input-append date exp-datepicker endDate" id="endDate_0" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
                            <input class="span2" size="16" type="text" value="12-02-2012" name="experiences[0].toDate" readonly>
                            <span class="add-on"><i class="icon-th"></i></span>
                        </div>
                    </div>
                    <div class="span3"><label>Position </label><input type="text" class="position" id="position_0" name="experiences[0].position" placeholder="Position"></div>
                    <div class="span8"><label>Description</label><textarea rows="4" class="span8 description" id="description_0" name="experiences[0].description" placeholder="Description"></textarea></div>
                </div>
                <div class="move-arrows"><span class="arrow-up icon-circle-arrow-up"></span><span class="arrow-down icon-circle-arrow-down"></span></div>
                <hr class="span8" style="margin-left:0px">
            </div>
        </c:when>
        <c:otherwise>
            <c:forEach items="${cvForm.experiences}" var="exp" varStatus="index">
                <c:set var="addedClass" value=""/>
                <c:if test="${index.index gt 0}">
                    <c:set var="addedClass" value=" added"/>
                </c:if>
                <div class="controls span8${addedClass}">
                    <div class="span8">
                        <div class="span3">
                            <label>Employer </label>
                            <input type="text" class="employer" id="employer_${index.index}" name="experiences[${index.index}].employer" placeholder="Employer" value="${exp.employer}"/>
                        </div>
                        <div class="span2">
                            <label>Start Date </label>
                            <div class="input-append date exp-datepicker startDate" id="startDate_${index.index}" data-date="<fmt:formatDate value='${exp.fromDate}' pattern='dd-MM-yyyy'/>" data-date-format="dd-mm-yyyy">
                                <input class="span2" size="16" type="text" value="<fmt:formatDate value='${exp.fromDate}' pattern='dd-MM-yyyy'/>" name="experiences[${index.index}].fromDate" readonly="readonly">
                                <span class="add-on"><i class="icon-th"></i></span>
                            </div>
                        </div>
                        <div class="span2">
                            <label>End Date </label>
                            <div class="input-append date exp-datepicker endDate"  id="endDate_${index.index}" data-date="<fmt:formatDate value='${exp.toDate}' pattern='dd-MM-yyyy'/>" data-date-format="dd-mm-yyyy">
                                <input class="span2" size="16" type="text" value="<fmt:formatDate value='${exp.toDate}' pattern='dd-MM-yyyy'/>" name="experiences[${index.index}].toDate" readonly="readonly">
                                <span class="add-on"><i class="icon-th"></i></span>
                            </div>
                        </div>
                        <div class="span3">
                            <label>Position </label>
                            <input type="text" class="position" id="position_${index.index}" name="experiences[${index.index}].position" placeholder="Position" value="${exp.position}">
                        </div>
                        <div class="span8">
                            <label>Description</label>
                            <textarea rows="4" class="span8 description" id="description_${index.index}" name="experiences[${index.index}].description" placeholder="Description">${exp.description}</textarea>
                        </div>
                    </div>
                    <div class="move-arrows"><span class="arrow-up icon-circle-arrow-up"></span><span class="arrow-down icon-circle-arrow-down"></span></div>
                    <c:if test="${index.index gt 0}">
                        <button class="remove btn btn-danger" type="button"><span class="icon-remove icon-white"></span> Remove</button>
                    </c:if>
                    <hr class="span8" style="margin-left:0px">
                </div>
            </c:forEach>
        </c:otherwise>
    </c:choose>
    <button id="add-experience" class="btn btn-info" type="button"><span class="icon-plus icon-white"></span> Add Experience</button>
</div>